

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" value="{$data.title}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>二级标题</label>
        <div class="layui-input-block">
            <input type="text" name="sub_title" lay-verify="required" placeholder="请输入二级标题" autocomplete="off" class="layui-input" value="{$data.sub_title}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn layui-btn-sm" id="test1">上传图片
            </button>
            <input hidden name="image" id="image_src" value="{$data.image}" >
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="test-upload-normal-img" style="width: 120px" src="{$data.image}">
                <p id="test-upload-demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>是否热门</label>
        <div class="layui-input-block">
            <input type="checkbox" name="is_hot" lay-skin="switch" lay-text="是|否"  value="1" <?=isset($data) && $data['is_hot']==0?'':'checked'?> >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>是否显示</label>
        <div class="layui-input-block">
            <input type="checkbox" name="is_show" lay-skin="switch" lay-text="是|否"  value="1"  <?=isset($data) && $data['is_show']==0?'':'checked'?>>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>显示在小程序首页科普知识</label>
        <div class="layui-input-block">
            <input type="checkbox" name="is_index" lay-skin="switch" lay-text="是|否"  value="1"  <?=isset($data) && $data['is_index']==0?'':'checked'?>>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">显示在小程序首页的图标</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn layui-btn-sm" id="test2">上传图片
            </button>
            <input hidden name="icon" id="icon_src" value="{$data['icon']}">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="test-upload-normal-img1" style="width: 120px" src="{$data.icon}">
                <p id="test-upload-demoText1"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="text" name="sort" lay-verify="required" value="{$data.sort}"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="hidden" name="id" value="{$data.id}">
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>

<script>
    layui.use(['form','upload','layer'], function(){
        var $ = layui.$
            ,form = layui.form
            ,upload = layui.upload
            ,layer = layui.layer;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:url('upload/ajaxUploads')}"
            ,accept: "images"
            ,field: "image"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#test-upload-normal-img').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else{
                    // console.log(res);
                    // $('input[name="image"]').val(res.data[0].path)
                    // console.log(res.data[0].path);
                    $('#image_src').val(res.data[0].path)
                }

                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#test-upload-demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        //普通图片上传
        var uploadInst2 = upload.render({
            elem: '#test2'
            ,url: "{:url('upload/ajaxUploads')}"
            ,accept: "images"
            ,field: "icon"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#test-upload-normal-img1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else{
                    // console.log(res);
                    // $('input[name="image"]').val(res.data[0].path)
                    // console.log(res.data[0].path);
                    $('#icon_src').val(res.data[0].path)
                }

                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#test-upload-demoText1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst2.upload();
                });
            }
        });

        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function(data){
            var field = data.field; //获取提交的字段
            console.log(field);
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.post("{:url('topic/save')}",field,function (ret) {
                if (ret.code == 0){
                    layer.msg(ret.msg,{icon:6,time:1000},function () {
                        parent.layer.close(index); //再执行关闭
                        parent.window.location.reload();
                    })
                }else{
                    layer.msg(ret.msg,{icon:5,time:1000})
                }
            });
        });
    })
</script>
